<template>
  <div class="Nearby">
    <title1 tit=""></title1>
    <div class="workplace">
      <h1>工作地点</h1>
      <span class="iconfont icon-ditu-dibiao"></span>
      <h2>工作地点</h2>

      <van-grid>
        <van-grid-item text="公交">
          <van-icon
            class="iconfont icon-coach-full"
            color="#ff5654"
            class-prefix="icon"
            slot="icon"
          >
          </van-icon>
        </van-grid-item>

        <van-grid-item text="驾车">
          <van-icon
            class="iconfont icon-chuzu"
            color="#ff5654"
            class-prefix="icon"
            slot="icon"
          >
          </van-icon> </van-grid-item
        ><van-grid-item text="步行">
          <van-icon
            class="iconfont icon-buxing"
            color="#ff5654"
            class-prefix="icon"
            slot="icon"
          >
          </van-icon> </van-grid-item
        ><van-grid-item text="骑行">
          <van-icon
            class="iconfont icon-yiliaohangyedeICON-"
            color="#ff5654"
            class-prefix="icon"
            slot="icon"
          >
          </van-icon>
        </van-grid-item>
      </van-grid>

      <h2>交通时间</h2>
      <van-row justify="space-around">
        <van-col span="6">15分</van-col>
        <van-col span="6">15分</van-col>
        <van-col span="6">15分</van-col>
        <van-col span="6">15分</van-col>
      </van-row>
      <div class="near-foot1">
        <button class="near-foot">立即找房</button>
      </div>
      
    </div>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
export default {
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Position" });
    },
  },
};
</script>

<style scoped lang="less">
.Nearby {
  height: 100%;
  background-color: #ebebeb;
  .workplace {
    height: 1000px;
    width: 700px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 30px 22px;
    h1 {
      color: #000000;
      opacity: 70%;
      font-size: 32px;
      font-weight: bolder;
      text-align: center;
      margin-top: 70px;
    }
    span {
      font-size: 70px;
      color: #ff5555;
      margin-left: 320px;
    }

    h2 {
      color: #000000;
      opacity: 70%;
      font-size: 32px;
      font-weight: bolder;
      text-align: center;
      margin-top: 40px;
    }
    .near-foot1 {
      text-align: center;
      margin-top: 100px;
      .near-foot {
      width: 80%;
      height: 80px;
      background-color:#ff5555 ;
      color: #fff;
      border-radius: 8px;
      border: 1px solid#ff5555;
    }
    }
    
  }
  .iconfont {
    font-size: 80px;
  }
  .van-col {
    font-size: 50px;
    text-align: center;
    color: #ff5555;
  }
}
</style>